//      react 16+ : 函数组件 + hook +reactrouter6      react16以下  class组件 +react-router-dom5以下
// hook 就是让组件拥有 数据 和 生命周期
import { useState,useEffect } from "react";
import { useParams } from "react-router-dom";
import axios from 'axios'
export default function Cateagory(){
    var params =  useParams();
    var [goodsDetail,setGoodsDetail] = useState({});
 

    //它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 AP
    useEffect(()=>{
        // 使用params.id 调用接口   setData 更新 data
       axios.get(`https://apipc-xiaotuxian-front.itheima.net/category?id=${params.id}`).then(res=>{
        if(res.data.msg=='操作成功'){
            goodsDetail = res.data.result;
            setGoodsDetail({...goodsDetail});
        }
       })
    },[params.id])  // 只监测 params.id 数据更新，其他数据更新不会调用useEffect
    return <div >
            cateagory
    </div>
}

